@charset "UTF-8";

.#{$ns-obj}btn {
    display: inline-block;
    padding: $btn-pd-tb $btn-pd-lr;
    margin: 0;
    line-height: 1;
    box-sizing: border-box;

    text-align: center;
    text-decoration: none;
    white-space: nowrap;

    font-size: $btn-ft-size;
    color: $white;
    border: 1px solid $gray;
    border-radius: $input-radius;

    outline: none !important;
    cursor: pointer;

    user-select: none;
	-webkit-appearance: none;

	transition: background ease-in-out .15s,
				border-color ease-in-out .15s;

    &.is-loading {  /* 加载中 */
       transition: all .2s ease-in-out;  // 添加渐变，让按钮尺寸变化不突兀

        &:after {
            content: attr(data-loading);
        }

        & > * {display: none;}
		& > .icon-loader {
			display: inline-block;
			animation: rotate 2s linear infinite;
		}
    }

    &[disabled] {
        color: $gray !important;
        background-color: $dark-white !important;
		border-color: lighten($gray, 10%) !important;
		pointer-events: none;
	}

	> [class^="icon-"] {
		/* 防止图标偏移，撑大按钮 */
		vertical-align: -2.25px;
		line-height: 0;

		/* icon 比字大1px，换算成em单位，方便按钮尺寸改变时响应 icon 尺寸 */
		font-size: ($btn-ft-size + 1) / $btn-ft-size * 1em;
	}
}

.#{$ns-obj}btn-normal {
    color: $black;
	background: $color-thead;

	&:focus {
		$focus-color: darken($dark-gray, 6%);

		border-color: $focus-color;
		box-shadow: 0 0 0 2px rgba($focus-color, .3);
	}

	&:hover {
        color: $blue;
        border-color: $blue;
	}

	&:active {background: darken($color-thead, 3%);}
}

// 情景按钮 mixin
@mixin colorButton($color) {
	background: $color;
	border-color: $color;

	&:focus {
		$focus-color: darken($color, 7%);

		border-color: $focus-color;
		box-shadow: 0 0 0 2px rgba($focus-color, .3);
	}

	&:hover {
        background: darken($color, 7%);
        border-color: darken($color, 7%);
	}

	&:active {
        background: darken($color, 10%);
        border-color: darken($color, 10%);
    }
}

.#{$ns-obj}btn-primary {
    @include colorButton($blue);
}

.#{$ns-obj}btn-success {
    @include colorButton($color-success);
}

.#{$ns-obj}btn-warning {
    @include colorButton($color-warning);
}

.#{$ns-obj}btn-danger {
    @include colorButton($color-danger);
}

.btn-lg {
    padding: $btn-pd-tb + 1px $btn-pd-lr + 4px;
    font-size: $btn-ft-size + 2px;
}

.btn-sm {
    padding: $btn-pd-tb - 2px $btn-pd-lr - 6px;
    font-size: $btn-ft-size - 2px;
}

.btn-xs {
	$xs-font-size: $btn-ft-size - 4px;
	@if $xs-font-size < $min-font-size {
		$xs-font-size: $min-font-size;
	}

    padding: $btn-pd-tb - 6px;
    font-size: $xs-font-size;
}
